<template>
  <div style="height: 50px"></div>
  <form @submit.prevent="addList">
    <input type="text" v-model="newList">
    <input type="button" value="提交" @click="addList">
    <input type="radio" name="性别" value="男" v-model="param">男
    <input type="radio" name="性别" value="女" v-model="param">女
  </form>
  <ul>
    <li>序号|姓名|性别|日期</li>
    <li v-for="list in lists" :key="list.id">
      {{list.id}}|{{list.name}}|{{list.sex}}|{{list.date}}
      <button @click="removeList(list)">X</button>
    </li>
  </ul>
</template>

<script>
let id = 0
export default {
  name: "list",
  data(){
    return {
      newList:'',
      lists:[
        {id:id++,name:"AA",sex:"M",date:"0000"},
        {id:id++,name:"BB",sex:"M",date:"0001"},
        {id:id++,name:"CC",sex:"W",date:"0002"},
      ]
    }
  },
  methods:{
    addList(){
      let date=new Date()
      this.lists.push({id:id++,name:this.newList,sex:this.param,date})
    },
    removeList(list) {
      this.lists = this.lists.filter((t) => t !== list)
    }
  }
}
</script>

<style scoped>

</style>